import Vue from 'vue'
import VueRouter from 'vue-router'

import AppHome from '@/views/AppHome'
import AppCart from '@/views/AppCart'
import AppSearch from '@/views/AppSearch'
import AppCategory from '@/views/AppCategory'
import AppMine from '@/views/AppMine'
import NotFound from '@/views/NotFound'
import AppFooter from '@/components/Layout/AppFooter'
import AppMiHome from '@/views/AppMiHome'
import AppServer from '@/views/AppServer'
import AppMember from '@/views/AppMember'
import AppCoupon from '@/views/AppCoupon'
import AppRegistry from '@/views/AppRegistry'
import AppRegistryStepOne from '@/views/AppRegistry/components/RegistryStepOne'
import AppRegistryStepTwo from '@/views/AppRegistry/components/RegistryStepTwo'
import AppRegistryStepThree from '@/views/AppRegistry/components/RegistryStepThree'
import AppRegistryStepFour from '@/views/AppRegistry/components/RegistryStepFour'
import AppLogin from '@/views/AppLogin'
import AppOrder from '@/views/AppOrder'
import AppSetting from '@/views/AppSetting'
const AppList = () => import('@/views/AppList')
const AppDetail = () => import('@/views/AppDetail')

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/', redirect: '/home' },
    {
      path: '/home',
      name: 'home',
      components: {
        default: AppHome,
        footer: AppFooter
      }
    },
    {
      path: '/list',
      name: 'list',
      component: AppList
    },
    {
      path: '/detail/:id',
      name: 'detail',
      props: true,
      component: AppDetail
    },
    {
      path: '/cart',
      name: 'cart',
      components: {
        default: AppCart,
        footer: AppFooter
      }
    },
    {
      path: '/category',
      name: 'category',
      components: {
        default: AppCategory,
        footer: AppFooter
      }
    },
    {
      path: '/mine',
      name: 'mine',
      components: {
        default: AppMine,
        footer: AppFooter
      }
    },
    {
      path: '/mihome',
      name: 'mihome',
      component: AppMiHome
    },
    {
      path: '/miserver',
      name: 'miserver',
      component: AppServer
    },
    {
      path: '/mimember',
      name: 'mimember',
      component: AppMember
    },
    {
      path: '/micoupon',
      name: 'micoupon',
      components: {
        default: AppCoupon,
        footer: AppFooter
      }
    },
    {
      path: '/myorder',
      name: 'myorder',
      components: {
        default: AppOrder,
        footer: AppFooter
      }
    },
    {
      path: '/misetting',
      name: 'misetting',
      component: AppSetting
    },
    {
      path: '/login',
      name: 'login',
      component: AppLogin
    },
    {
      path: '/search',
      name: 'search',
      components: {
        default: AppSearch,
        footer: AppFooter
      }
    },
    {
      path: '/registry',
      name: 'registry',
      component: AppRegistry,
      redirect: '/registry/stepone',
      children: [
        { path: 'stepone', name: 'stepone', component: AppRegistryStepOne },
        { path: 'steptwo/:tel', props: true, name: 'steptwo', component: AppRegistryStepTwo },
        { path: 'stepthree/:tel', props: true, name: 'stepthree', component: AppRegistryStepThree },
        { path: 'stepfour/:tel&:password', props: true, name: 'stepfour', component: AppRegistryStepFour }
      ]
    },
    { path: '/404', name: 'notfound', component: NotFound },
    { path: '*', redirect: { name: 'notfound' } }
  ]
})

router.beforeEach((to, from, next) => {
  next()
})

export default router
